<!DOCTYPE html>
<html>
<div th:replace="common/jsCssRef :: jsfJsCssRef"></div>

<body class="bgf6">

<div th:replace="common/head :: jsfHeader"></div>

<div class="main-body pb100">
    <div class="container pt10" id="app">
        <div class="dflx sbt">
            <div th:replace="common/left :: jsfLeft"></div>

            <div class="body-right">
                <div class="bread-nav bgff">
                    <ul class="dflx">
                        <li><a href="###">首页</a></li>
                        <li><a href="###">统筹规划</a></li>
                        <li><a href="/view/developPlan">全市发展规划</a></li>
                        <li><a href="###">查看</a></li>
                    </ul>
                </div>

                <div class="bgff mt10 pb20">
                    <div class="wrap">
                        <div class="top-info">
                            <h2 class="title">{{plan.planName}}<span class="no" v-text="plan.planNo"></span></h2>
                            <div class="mt5">
                                <span>创建人：{{log.creatorName}}</span>
                                <span class="ml20">创建时间：{{log.createTime}}</span>
                            </div>
                        </div>

                        <div class="box mt30">
                            <div class="box-title"><span>编制规划基本信息</span></div>
                            <div class="mt20 f14">
                                <div class="two">
                                    <span class="title">规划名称</span>
                                    <span class="content" v-text="plan.planName"></span>
                                    <span class="title">规划编号</span>
                                    <span class="content" v-text="plan.planNo"></span>
                                </div>
                                <div class="two">
                                    <span class="title">开始年份</span>
                                    <span class="content" v-text="plan.planBeginTime"></span>
                                    <span class="title">截止年份</span>
                                    <span class="content" v-text="plan.planEndTime"></span>
                                </div>
                                <div class="two">
                                    <span class="title">编制单位</span>
                                    <span class="content" v-text="plan.compileUnit"></span>
                                    <span class="title">编制人</span>
                                    <span class="content" v-text="plan.compilePerson"></span>
                                </div>
                                <div class="one">
                                    <span class="title">上传附件</span>
                                    <div class="content">
                                        <a href="" class="mr20">长沙市2019年全市交通监控系统升级.pdf</a>
                                        <a href="" class="mr20">长沙市2019年全市交通监控系统升级.pdf</a>
                                    </div>
                                </div>

                                <div class="one">
                                    <span class="title">备注</span>
                                    <div class="content" v-text="plan.remark"></div>
                                </div>
                            </div>
                        </div>

                        <div class="box mt30">
                            <div class="box-title"><span>编制规划审定</span></div>
                            <div class="mt20 f14">
                                <div class="two">
                                    <span class="title">审定人</span>
                                    <span class="content" v-text="plan.auditPerson"></span>
                                    <span class="title">审定时间</span>
                                    <span class="content" v-text="plan.auditTime"></span>
                                </div>
                                <div class="one">
                                    <span class="title">审定结果</span>
                                    <div class="content"><span v-bind:class="[plan.auditResult == 1 ? 'cgre' : 'cred']"><i
                                            v-bind:class="[plan.auditResult == 1 ? 'ion-checkmark-circled' : 'ion-close-circled']"></i> {{planStatusDesc(plan.auditResult)}}</span>
                                    </div>
                                </div>
                                <div class="one">
                                    <span class="title">上传附件</span>
                                    <div class="content">
                                        <a href="" class="mr20">长沙市2019年全市交通监控系统升级.pdf</a>
                                        <a href="" class="mr20">长沙市2019年全市交通监控系统升级.pdf</a>
                                    </div>
                                </div>

                                <div class="one">
                                    <span class="title">审定意见</span>
                                    <div class="content" v-text="plan.auditOpinion"></div>
                                </div>
                            </div>
                        </div>

                        <div class="box mt30">
                            <div class="box-title"><span>编制规划批准</span></div>
                            <div class="mt20 f14">
                                <div class="two">
                                    <span class="title">批准人</span>
                                    <span class="content" v-text="plan.approvalPerson"></span>
                                    <span class="title">批准时间</span>
                                    <span class="content" v-text="plan.approvalTime"></span>
                                </div>
                                <div class="one">
                                    <span class="title">批准结果</span>
                                    <div class="content"><span
                                            v-bind:class="[plan.isApproval == 1 ? 'cgre' : 'cred']"><i
                                            v-bind:class="[plan.isApproval == 1 ? 'ion-checkmark-circled' : 'ion-close-circled']"></i> {{planStatusDesc(plan.isApproval)}}</span>
                                    </div>
                                </div>

                                <div class="one">
                                    <span class="title">批准意见</span>
                                    <div class="content" v-text="plan.approvalOpinion"></div>
                                </div>
                            </div>
                        </div>


                        <div class="box mt30 pb100" v-if="plan.updaterJfid != 0">
                            <div class="box-title"><span>最新一次修改记录</span></div>
                            <div class="mt20 f14">
                                <div class="modify-log dflx sbt aic">
                                    <div class="dflx">
                                        <img src="../../images/1.jpg" alt="" class="avator"/>
                                        <div class="mt5 pl10">
                                            <p class="f14 c333">{{updaterJfid}}</p>
                                            <p class="f12 c666 mt3">编辑了审定结果</p>
                                        </div>
                                    </div>
                                    <span class="c666 f12">{{plan.updateTime}}</span>
                                </div>

                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">

    var statusPlanObj = {
        '1': '通过',
        '2': '不通过'
    }

    var planId = getUrlParam('id');

    var appPage = new Vue({
        el: '#app',
        data: {
            plan: {},
            log:{},
            updaterJfid:""
        },
        created: function () {
            loadPlanDetail();
            this.getLog();
        },
        computed: {},
        methods: {
            getLog(){
                let _this = this;
                $.ajax({
                    'url': contentPath + '/cityPlan/getList/log',
                    'dataType': 'json',
                    'type': 'get',
                    'data': {
                        planId: planId
                    },
                    'success': function (result) {
                        _this.updaterJfid = result.data[0].actionPerson;
                    }
                })
            },
            planStatusDesc: function (val) {
                return statusPlanObj[val];
            }
        }
    })

    function toEdit() {
        window.location.href = contentPath + '/view/editDevelopPlan?id=' + planId;
    }

    function loadPlanDetail() {
        $.ajax({
            'url': contentPath + '/cityPlan/getOne',
            'dataType': 'json',
            'type': 'get',
            'data': {
                id: planId
            },
            'success': function (result) {
                if (result.code != 1000) {
                    alert(result.message);
                    return;
                }

                appPage.plan = result.data;
            },
            'error': function (result) {
            }
        });
        $.ajax({
            'url': contentPath + '/cityPlan/getOne/log',
            'dataType': 'json',
            'type': 'get',
            'data': {
                planId: planId,
                actionType: 1
            },
            'success': function (result) {
                if (result.code != 1000) {
                    alert(result.message);
                    return;
                }
                appPage.log = result.data;
            },
            'error': function (result) {
            }
        });
    }

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

</script>
</body>
</html>
